<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--潘天赐-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-treeview.min.css"
          th:href="@{static/js/bootstrap/css/bootstrap-treeview.min.css}"
    >
    <script src="static/js/bootstrap/js/bootstrap-treeview.min.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap.addtabs.css">
    <script src="static/js/bootstrap/js/bootstrap.addtabs.min.js"></script>
    <link rel="stylesheet" href="static//js/bootstrap/css/bootstrap-table.min.css">
    <script src="static/js/bootstrap/js/bootstrap-table.min.js"></script>
    <script src="static/js/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/bootstrap/js/bootbox.js"></script>
    <link rel="stylesheet"
          href="static/js/bootstrap/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript"
            src="static/js/bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="static/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="static/js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="static/js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>
&nbsp;
<button type="button" onclick="exportData()" style="width: 200px" class="btn btn-success">下载</button>
<br><br>
<table id="myTable"></table>
<button type="button" onclick="service()" class="btn btn-info">查看服务项</button>
<h3>服务项报价</h3>
<table class="table">
    <thead>
    <tr>
        <th>服务名称</th>
        <th>价格(元)</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>运费</td>
        <td><input type="text" id="freight" class="form-control" style="width:100px;"></td>
    </tr>
    <tr>
        <td>组装费</td>
        <td><input type="text" id="assemblingCharge" class="form-control" style="width:100px;"></td>
    </tr>
    <tr>
        <td><input type="text" id="otherBusiness" class="form-control" style="width:200px;"></td>
        <td><input type="text" id="businessPrice" class="form-control" style="width:100px;"></td>
    </tr>
    <tr>
        <td colspan="2">
            备注：<textarea id="offerFormRemark" style="width:200px;"></textarea>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            附件：
            <img id="offerFormAccessory" width="350px"/>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            供货周期(天)：<input type="text" id="deliveryCycle" class="form-control" style="width:200px;">
        </td>
    </tr>
    <tr>
        <td colspan="1">
            报价有效时间(天)：<input type="date" id="offerFormValidTime" class="form-control" style="width:400px;">
        </td>
        <td>
            项目总价：<input type="text" id="totalPrices" class="form-control" style="width:200px;">
        </td>
    </tr>
    </tbody>
</table>

</body>
<script>
    //var id = [[${session.queryOfferId}]];
    //var id = 1;
    $("#myTable").bootstrapTable({
        url:"queryMaterialsOffer",
        columns:[
            {field:'materialsType',title:'类目',
                formatter: function(value,row,index){
                    return '<input type="hidden" id="materialsInventoryId" value="'+row.materialsInventoryId+'" class="form-control" style="width:50px;">'+value
                }
            },
            {field:'materialsName',title:'材料名称'},
            {field:'materialsId',title:'材料编码'},
            {field:'materialsCount',title:'材料数量'},
            {field:'brand',title:'品牌'},
            {field:'price',title:'单价（元）'},
        ],
        pagination:true,			//是否展示分页
        pageNumber:1,				//当前页
        pageList:[1,3,5],			//分页组件
        sidePagination : 'client',	//分页方式：client客户端分页，server服务端分页
    })

    function service() {
        var oid = $("#materialsInventoryId").val()
        $.ajax({
            url: "findByOffer",
            type: "post",
            data: {oid: oid},
            success: function (data) {
                $("#freight").val(data.freight)
                $("#assemblingCharge").val(data.assemblingCharge)
                $("#otherBusiness").val(data.otherBusiness)
                $("#businessPrice").val(data.businessPrice)
                $("#offerFormRemark").val(data.offerFormRemark)
                $("#offerFormAccessory").attr("src", data.offerFormAccessory)	//赋值
                $("#deliveryCycle").val(data.deliveryCycle)
                $("#offerFormValidTime").val(data.offerFormValidTime)
                $("#totalPrices").val(data.totalPrices)
            }
        });
    }

    //导出
    function exportData(){
        var id = $("#materialsInventoryId").val()
        alert("下载成功")
        location.href="exportDataOffer?id="+id;
    }



</script>
</html>